<template>
  <div id="changePwd">
    <HeaderBg>
      <Headers :title="$t('settings.changePwds.title')"/>
    </HeaderBg>
    <div class="change-select" @click="$refs.layer.style.transform = 'translateY(0)'">
      <div class="selects">
        <span>{{$t('settings.changePwds.types')}}</span>
        <span>{{defaultSelect}}</span>
      </div>
      <div class="select-icon">
        <img src="../../../../assets/select-icon.png" alt>
      </div>
    </div>
    <!-- input框 -->
    <div class="inputs-container">
      <input type="text" v-model="changePwd.oldPwd" :placeholder="$t('settings.changePwds.oldPwd')">
      <input type="text" v-model="changePwd.newPwd" :placeholder="$t('settings.changePwds.newPwd')">
      <input
        type="text"
        v-model="changePwd.newPwd2"
        :placeholder="$t('settings.changePwds.newPwd2')"
      >
    </div>

    <div class="changePwdSub" @click="changePwdSub">{{$t('settings.changePwds.changeOk')}}</div>
    <!-- layer -->
    <div class="select-layer" ref="layer">
      <div class="layer-container">
        <div class="icons">
          <img @click="closeLayer" src="../../../../assets/bottoms.png" alt>
        </div>
        <div class="select-pwd">{{$t('settings.changePwds.selectPwdType')}}</div>
        <div class="radio">
          <p @click="selectVal('login')">
            <span class="icon">
              <img
                :src="flag == 'login' ? require('assets/radio_active.png') : require('assets/radio.png')"
                alt
              >
            </span>
            <span>{{$t('settings.changePwds.editLoginPwd')}}</span>
          </p>
          <p class="marginTop" @click="selectVal('pay')">
            <span class="icon">
              <img
                :src="flag == 'pay' ? require('assets/radio_active.png') : require('assets/radio.png')"
                alt
              >
            </span>
            <span>{{$t('settings.changePwds.editPayPwd')}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
export default {
  name: "changePwd",
  data() {
    return {
      defaultSelect: this.$t("settings.changePwds.loginPwd"),
      changePwd: {
        oldPwd: "",
        newPwd: "",
        newPwd2: ""
      },
      flag: "login"
    };
  },
  methods: {
    closeLayer() {
      this.$refs.layer.style.transform = "translateY(100%)";
    },
    selectVal(flag) {
      this.flag = flag;
      switch (flag) {
        case "login":
          this.defaultSelect = this.$t("settings.changePwds.loginPwd");
          this.closeLayer();
          break;

        case "pay":
          this.defaultSelect = this.$t("settings.changePwds.payPwd");
          this.closeLayer();
          break;
      }
    },
    changePwdSub() {
      console.log(this.changePwd, this.defaultSelect);
    }
  },
  components: {
    HeaderBg
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../../utils/styl/mixin.styl'
#changePwd
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .change-select
    width rem(335)
    display flex
    justify-content space-between
    border rem(1) solid $tabBarActive
    border-radius rem(25)
    margin rem(130) auto 0
    box-sizing border-box
    padding rem(14) rem(23)
    align-items center
    .selects
      color $colors
      font-size rem(15)
    .select-icon
      width rem(22)
      height rem(12)
      img
        width 100%
        height 100%
  .inputs-container
    margin-top rem(35)
    input
      width rem(335)
      box-sizing border-box
      padding rem(14) rem(23)
      background-color $inputBg
      margin-bottom rem(12)
      border-radius rem(25)
      font-size rem(15)
      color $fontColor
  .changePwdSub
    positCenter(50%, auto, rem(82), auto, -50%, 0)
    width rem(335)
    box-sizing border-box
    padding rem(14) rem(23)
    background-color $tabBarActive
    color $fontColor
    border-radius rem(25)
    font-size rem(15)
  .select-layer
    transform translateY(100%)
    position fixed
    top 0
    bottom 0
    width 100%
    background-color rgba(33, 38, 65, 0.44)
    transition 0.2s all
    .layer-container
      positCenter(0, auto, 0, auto, 0, 0)
      height rem(229)
      width 100%
      background-color $bodyBg
      .icons
        width rem(32)
        height rem(32)
        margin rem(-16) auto 0
        img
          width 100%
          height 100%
      .select-pwd
        margin rem(34) auto rem(40)
        font-size rem(15)
        color $colors
      .radio
        p
          font-size rem(18)
          color $fontColor
        .marginTop
          margin-top rem(34)
        span
          vertical-align middle
        .icon
          display inline-block
          width rem(18)
          height rem(18)
          vertical-align middle
          margin-right rem(6)
          img
            width 100%
            height 100%
            object-fit contain
</style>
